<template>
   <div class="portal-container">
      <!-- 顶部导航栏 -->
      <el-header class="portal-header">
         <div class="header-content">
            <div class="logo-section">
               <el-icon :size="32" color="#409EFF">
                  <Reading/>
               </el-icon>
               <span class="logo-text">图书销售管理系统</span>
            </div>
            <div class="nav-section">
               <template v-if="!isLogin">
                  <el-button type="primary" @click="goToLogin('user')">登录</el-button>
                  <el-button type="success" @click="goToRegister">注册</el-button>
                  <el-button type="warning" @click="goToLogin('admin')">管理员</el-button>
               </template>
               <template v-else>
                  <el-dropdown @command="handleUserMenu">
                     <el-button type="primary">
                        {{ loginUserName }} <el-icon class="el-icon--right"><arrow-down/></el-icon>
                     </el-button>
                     <template #dropdown>
                        <el-dropdown-menu>
                           <el-dropdown-item command="enter">进入系统</el-dropdown-item>
                           <el-dropdown-item command="logout" divided>退出登录</el-dropdown-item>
                        </el-dropdown-menu>
                     </template>
                  </el-dropdown>
               </template>
            </div>
         </div>
      </el-header>

      <!-- 主横幅区域 -->
      <div class="hero-section">
         <div class="hero-content">
            <h1 class="hero-title">欢迎使用图书销售管理系统</h1>
            <p class="hero-subtitle">Welcome to Book Sales Management System</p>
            <p class="hero-description">在线浏览、购买图书，享受便捷的阅读体验</p>
            <div class="hero-buttons">
               <el-button type="primary" size="large" @click="goToBrowse">
                  <el-icon><ShoppingCart/></el-icon>
                  开始购书
               </el-button>
            </div>
         </div>
      </div>

      <!-- 热门图书展示区 -->
      <div class="books-section">
         <h2 class="section-title">热门图书推荐</h2>
         <div v-loading="loading" element-loading-text="加载中...">
            <el-empty v-if="!loading && hotBooks.length === 0" description="暂无图书数据"></el-empty>
            <el-row :gutter="20" justify="center" v-else>
               <el-col :xs="12" :sm="8" :md="6" :lg="4" v-for="book in hotBooks" :key="book.id">
                  <el-card class="book-card" shadow="hover" @click="goToBookDetail(book.id)">
                     <div class="book-cover">
                        <el-image :src="getBookCover(book.surfaceImg)" fit="cover" style="width: 100%; height: 180px;">
                           <template #error>
                              <div class="image-slot">
                                 <el-icon><Picture/></el-icon>
                              </div>
                           </template>
                        </el-image>
                     </div>
                     <div class="book-info">
                        <h4 class="book-title" :title="book.bookName">{{ book.bookName }}</h4>
                        <p class="book-author">{{ book.author || '未知作者' }}</p>
                        <p class="book-price">¥{{ book.sellPrice }}</p>
                     </div>
                  </el-card>
               </el-col>
            </el-row>
         </div>
         <div style="text-align: center; margin-top: 30px;">
            <el-button type="primary" size="large" @click="goToBrowse">查看更多图书 →</el-button>
         </div>
      </div>

      <!-- 页脚 -->
      <el-footer class="portal-footer">
         <p>基于 Spring Boot + Vue 3 + Element Plus 开发</p>
      </el-footer>
   </div>
</template>

<script>
import {Reading, ShoppingCart, ArrowDown, Picture} from '@element-plus/icons-vue'
import {ElMessage} from 'element-plus'
import axiosUtil from '@/utils/axiosUtil'

export default {
   name: 'PortalIndex',
   components: {
      Reading, ShoppingCart, ArrowDown, Picture
   },
   data() {
      return {
         isLogin: false,
         loginUserName: '',
         loginUserType: '',
         loading: false,
         hotBooks: []
      }
   },
   methods: {
      // 检查登录状态
      checkLoginStatus() {
         const token = sessionStorage.getItem('token')
         const userCode = sessionStorage.getItem('userCode')
         const userType = sessionStorage.getItem('userType')
         
         if (token && userCode) {
            this.isLogin = true
            this.loginUserName = userCode
            this.loginUserType = userType
         }
      },
      // 加载热门图书
      loadHotBooks() {
         this.loading = true
         axiosUtil.get({
            url: '/bookInfo/getTable',
            data: {
               pageIndex: 1,
               pageSize: 8,  // 获取8本热门图书
               isSell: '是'  // 只获取在售图书
            },
            success: res => {
               this.loading = false
               this.hotBooks = res.data.table || []
            }
         })
         
         // 设置超时，防止一直loading
         setTimeout(() => {
            this.loading = false
         }, 5000)
      },
      // 获取图书封面图片路径
      getBookCover(imageName) {
         if (!imageName) {
            return ''
         }
         return axiosUtil.baseUrl() + '/uploadDir/' + imageName
      },
      // 跳转到图书详情
      goToBookDetail(bookId) {
         this.$router.push(`/client/bookinfo?id=${bookId}`)
      },
      // 用户菜单操作
      handleUserMenu(command) {
         if (command === 'enter') {
            this.enterSystem()
         } else if (command === 'logout') {
            this.logout()
         }
      },
      // 进入系统
      enterSystem() {
         if (this.loginUserType === 'user') {
            this.$router.push('/client/layout')
         } else if (this.loginUserType === 'admin') {
            this.$router.push('/admin/layout')
         }
      },
      // 退出登录
      logout() {
         const userType = this.loginUserType
         const token = sessionStorage.getItem('token')
         
         const logoutUrl = userType === 'admin' ? '/login/adminLogout' : '/login/userLogout'
         
         axiosUtil.postForm({
            url: logoutUrl,
            data: {token: token},
            success: res => {
               sessionStorage.clear()
               this.isLogin = false
               this.loginUserName = ''
               this.loginUserType = ''
               ElMessage.success('已退出登录')
            }
         })
      },
      // 跳转到登录页面
      goToLogin(type) {
         if (type === 'admin') {
            this.$router.push('/adminlogin')
         } else {
            this.$router.push('/clientlogin')
         }
      },
      // 跳转到注册页面
      goToRegister() {
         this.$router.push('/register')
      },
      // 游客浏览
      goToBrowse() {
         this.$router.push('/client/index')
      }
   },
   mounted() {
      this.checkLoginStatus()
      this.loadHotBooks()
   }
}
</script>

<style scoped>
.portal-container {
   min-height: 100vh;
   background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}

/* 顶部导航栏 */
.portal-header {
   background: rgba(255, 255, 255, 0.95);
   backdrop-filter: blur(10px);
   box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
   position: sticky;
   top: 0;
   z-index: 1000;
   height: 70px;
   line-height: 70px;
   padding: 0;
}

.header-content {
   max-width: 1200px;
   margin: 0 auto;
   padding: 0 20px;
   display: flex;
   justify-content: space-between;
   align-items: center;
   height: 100%;
}

.logo-section {
   display: flex;
   align-items: center;
   gap: 12px;
}

.logo-text {
   font-size: 20px;
   font-weight: bold;
   color: #303133;
}

.nav-section {
   display: flex;
   gap: 10px;
   align-items: center;
}

/* 主横幅区域 */
.hero-section {
   background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
   color: white;
   padding: 100px 20px;
   text-align: center;
}

.hero-content {
   max-width: 800px;
   margin: 0 auto;
}

.hero-title {
   font-size: 48px;
   font-weight: bold;
   margin-bottom: 20px;
   text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.hero-subtitle {
   font-size: 24px;
   margin-bottom: 15px;
   opacity: 0.9;
}

.hero-description {
   font-size: 18px;
   margin-bottom: 40px;
   opacity: 0.8;
}

.hero-buttons {
   display: flex;
   gap: 20px;
   justify-content: center;
   flex-wrap: wrap;
}

/* 图书展示区 */
.books-section {
   max-width: 1200px;
   margin: 60px auto 80px;
   padding: 40px 20px;
   background: white;
   border-radius: 12px;
   box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.section-title {
   text-align: center;
   font-size: 32px;
   margin-bottom: 40px;
   color: #303133;
   position: relative;
   padding-bottom: 15px;
}

.section-title::after {
   content: '';
   position: absolute;
   bottom: 0;
   left: 50%;
   transform: translateX(-50%);
   width: 60px;
   height: 3px;
   background: #409EFF;
}

.book-card {
   margin-bottom: 20px;
   border-radius: 8px;
   cursor: pointer;
   transition: transform 0.3s;
}

.book-card:hover {
   transform: translateY(-5px);
}

.book-cover {
   margin-bottom: 10px;
   border-radius: 4px;
   overflow: hidden;
}

.image-slot {
   display: flex;
   justify-content: center;
   align-items: center;
   width: 100%;
   height: 180px;
   background: #f5f7fa;
   color: #909399;
   font-size: 30px;
}

.book-info {
   text-align: center;
}

.book-title {
   font-size: 16px;
   margin-bottom: 5px;
   color: #303133;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}

.book-author {
   font-size: 13px;
   color: #909399;
   margin-bottom: 8px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}

.book-price {
   font-size: 18px;
   color: #F56C6C;
   font-weight: bold;
}

/* 页脚 */
.portal-footer {
   background: #2c3e50;
   color: white;
   text-align: center;
   padding: 30px 20px;
   margin-top: 0;
}

.portal-footer p {
   margin: 5px 0;
   opacity: 0.8;
}

/* 响应式设计 */
@media (max-width: 768px) {
   .hero-title {
      font-size: 32px;
   }

   .hero-subtitle {
      font-size: 18px;
   }

   .logo-text {
      display: none;
   }

   .nav-section {
      gap: 5px;
   }

   .nav-section .el-button {
      padding: 8px 12px;
      font-size: 14px;
   }
}
</style>

